<template>
    <div>
        <p>函数式组件</p>
        <Functional :name="`hello ${name}`" @click="log">click here</Functional>
        <functional-button>按钮-单文件</functional-button>
        <!-- <temp-val :var1="`do ${name}`">
            <template v-slot='{var1}'>
                {{var1}}
            </template>
        </temp-val>

        <Functional2 @click="log()">click me</Functional2>

        <Functional3 class='footerBtn'>
            zero
            <template v-slot:foo>
                first
            </template>
            <p>second</p>
            <p>third</p>
        </Functional3> -->
    </div>
</template>

<script>
import Functional from './Functional'
import FunctionalButton from './FunctionalButton';
// import Functional2 from './Functional2.js'
// import Functional3 from './Functional3.js'
// import TempVal from './TempVar'

export default {
    components: {
        Functional,
        FunctionalButton,
        // TempVal,
        // Functional2,
        // Functional3
    },
    data() {
        return {
            name: 'vue'
        }
    },
    methods: {
        log() {
            console.log('good day!')
        }
    }
}
</script>